<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { get_SheBeitotal } from '@/request';


var option = {
    legend: {
        orient: 'vertical',
        right: 10,
        top: 10,
        bottom: 20,
        textStyle: {
            color: '#fff'
        },
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
        {
            name: 'item',
            type: 'pie',
            radius: [0, 50],
            center: ['30%', '60%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            label: {
                show: false
            },
            data: [{ value: 8, name: 'rose 1' },
            { value: 10, name: 'rose 2' },
            { value: 32, name: 'rose 3' },]
        }
    ]
};
const boxRef = ref(null)
onMounted(() => {
    var myChart = echarts.init(boxRef.value);
    get_SheBeitotal().then(resp => {
        option.series[0].data = resp.data.data.map(item => {
            return {
                name: item.name,
                value: item.value
            }
        })
        myChart.setOption(option)
    })
    myChart.setOption(option)
    window.addEventListener('resize', () => {
        myChart.resize();
    })
})

</script>

<template>
    <div ref="boxRef" class="Shebei">

    </div>
</template>

<style scoped lang="scss">
.Shebei {
    width: 450px;
    height: 120px;
    // border: #ccc solid 1px;
}
</style>
